import React, { useEffect, useState } from 'react'
import { View, Animated, TouchableWithoutFeedback, Easing, StyleSheet } from 'react-native';
type Props = {
  checked?: boolean
  onChange: (value: boolean) => void,
  activeColor?: string
  inactiveColor?: string
  size?: number
  disabled?: boolean
}
const Switch = (
  {
    size = 30,
    checked = false,
    activeColor = "#0f59a4",
    inactiveColor = "#dcdee0",
    ...rest }: Props) => {
  const move = new Animated.Value(0)
  const click = () => {
    Animated.timing(move, {
      toValue: checked ? 0 : size,
      duration: 300,
      useNativeDriver: false,
      easing: Easing.elastic(0.5),
    }).start(() => {
      rest.onChange(!checked)
    })
  }
  const moveInterpolate = move.interpolate({
    inputRange: [0, size],
    outputRange: [inactiveColor, activeColor]
  })
  useEffect(() => {
    checked ? move.setValue(size) : move.setValue(0)
  }, [checked])
  return (
    <TouchableWithoutFeedback disabled={rest?.disabled} onPress={click}>
      <Animated.View style={[
        styles.switch,
        {
          width: size * 2,
          height: size,
          borderRadius: size / 2,
          backgroundColor: moveInterpolate,
          borderColor: moveInterpolate
        }]}>
        <Animated.View style={{ transform: [{ translateX: move }] }}>
          <View style={[styles.switch_node, { width: size - 1, height: size - 1, borderRadius: size / 2 }]}></View>
        </Animated.View>
      </Animated.View>
    </TouchableWithoutFeedback>
  )
}
const styles = StyleSheet.create({
  switch: {
    justifyContent: "center",
    borderWidth: 1,
  },
  switch_node: {
    backgroundColor: "#fff",
  }
})
export default Switch